<template>
  <a-card :bordered="false" class="addOrder">
    <el-page-header @back="$router.go(-1)" style="margin-bottom:10px"></el-page-header>
    <el-form
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      :labelWidth="labelWidth"
      class="demo-ruleForm"
    >
      <!-- 基本信息 -->
      <com-title :styleIng="{margin:'10px 0px 10px 10px'}" :isShow="false">
        <span slot="title">基本信息</span>
        <el-row :gutter="10" slot="table">
          <el-col :xs="24">
            <el-form-item>
              <h3 slot="label">采购订单：</h3>
              <h3>{{info.order}}</h3>
            </el-form-item>
          </el-col>
          <el-col :xs="24">
            <el-form-item>
              <h3 slot="label">入库类型：</h3>
              <h3>{{info.ruku}}</h3>
            </el-form-item>
          </el-col>
          <el-col :xs="24">
            <el-form-item>
              <h3 slot="label">出库方：</h3>
              <h3>{{info.chuku}}</h3>
            </el-form-item>
          </el-col>
          <el-col :xs="24">
            <el-form-item label="入库日期：" prop="date1">
              <a-range-picker
                v-model="ruleForm.date1"
                show-time
                style="width:40%"
                format="YYYY-MM-DD"
                @change="cxsjChange"
                :disabled="disabled"
              />
            </el-form-item>
          </el-col>
          <el-col :xs="24">
            <el-form-item label="备注：">
              <a-input
                v-model="ruleForm.spmc"
                placeholder="请填写备注"
                type="textarea"
                :maxLength="1500"
                style="width:40%"
                :disabled="disabled"
              />
            </el-form-item>
          </el-col>
          <el-col :xs="24">
            <el-form-item label="入库凭证：">
              <div class="upload_list clearfix">
                <div :key="item.uid" v-for="item in fileList">
                  <el-image class="imgs" :src="item.url" alt :preview-src-list="fileListUrl"></el-image>
                  <div>
                    <a-button type="link" size="small" @click="setZhutu(item)" v-if="false">设为主图</a-button>
                    <a-button type="link" size="small" style="color:#000" v-else>主图</a-button>
                    <a-button type="link" size="small" @click="delUplod(item)">删除</a-button>
                  </div>
                </div>
                <a-upload
                  name="avatar"
                  listType="picture-card"
                  class="avatar-uploader"
                  :showUploadList="false"
                  :beforeUpload="beforeUpload"
                  @change="handleChange"
                  :disabled="disabled"
                >
                  <div v-if="fileList.length < 6">
                    <a-icon :type="loading ? 'loading' : 'plus'" />
                    <div class="ant-upload-text">点击上传</div>
                  </div>
                </a-upload>
              </div>
              <!-- modal -->
              <cropper-modal
                ref="cropperModal"
                :optionsData="optionsData"
                @ok="handleCropperSuccess"
              ></cropper-modal>
            </el-form-item>
          </el-col>
        </el-row>
      </com-title>

      <!-- 采购信息 -->
      <com-title :styleIng="{margin:'10px 0px 10px 10px'}" :isShow="false">
        <span slot="title">
          <span>商品明细</span>
        </span>
        <buyingIfor slot="table" ref="buyingIfor" style="margin:10px 0px 10px 10px" />
      </com-title>
      <div class="content">
        <a-button type="primary" @click="submitSave('ruleForm')">确认入库</a-button>
        <a-button @click="quxiao('ruleForm')">取消</a-button>
      </div>
    </el-form>
    <choiceShop ref="choiceShop" @trigger="trigger" />
  </a-card>
</template>

<script src='./index.js'></script>

<style lang="less">
.addOrder {
  .content {
    text-align: center;
    margin: 20px 0px;
    button {
      margin-right: 10px;
    }
  }
}
.upload_list {
  & > div {
    float: left;
    margin-right: 10px;
    & > .imgs {
      width: 150px;
      height: 130px;
      border-top-left-radius: 4px;
      border-top-right-radius: 4px;
    }
    & > div {
      width: 150px;
      margin-bottom: 0;
      text-align: center;
      background-color: #fafafa;
      display: flex;
      justify-content: center;

      span {
        padding-right: 10px;
        cursor: pointer;
      }
    }
  }
  .avatar-uploader {
    float: left;
  }
}
</style>
